<template>
  <div>
    <div class="spanSty"><span>国家基本公共卫生服务项目严重精神障碍患者个人信息补充表</span></div>
    <el-divider content-position="left">编号</el-divider>
    <el-form
      :model="form"
      ref="formRef"
      :rules="formRules"
      label-width="130px"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
        </el-col>


        <el-col :lg="12" :xl="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard">
              <el-button
                style="padding-right: 10px"
                slot="suffix"
                type="text"
                @click="pushForm"
                v-if="ifEdit==false"
              >同步数据</el-button
              >
            </el-input>
          </el-form-item>
        </el-col>



      </el-row>
      <el-row :gutter="20">

        <el-col :lg="12" :xl="12">
          <el-form-item label="监护人姓名">
            <el-input v-model="form.guardianName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="与患者关系">
            <el-input v-model="form.Patient"></el-input>
          </el-form-item>
        </el-col>


      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="监护人地址">
            <el-input v-model="form.guardianAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="监护人电话">
            <el-input v-model="form.guardianPhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="村(居)委会联系人">
            <el-input v-model="form.village"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="村委会联系电话">
            <el-input v-model="form.villagePhone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="户别">
          <el-select v-model="form.monthAge" style="width: 100%">
            <el-option
              v-for="item in monthAge"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
          </el-form-item>

        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="既往史">
            <el-select v-model="form.previous" style="width: 100%">
              <el-option
                v-for="item in previous"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="知情同意">
            <el-select v-model="form.informed" style="width: 100%">
              <el-option
                v-for="item in informed"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="知情人">
            <el-input v-model="form.informedMen"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="知情人签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove1"
              :on-change="onprogress1"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed1"
              :file-list="fileList1"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>


        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="签字时间">
            <el-date-picker
              v-model="form.filingDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>




      <el-divider content-position="left">既往史</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="初次发病时间">
            <el-date-picker
              v-model="form.maidenDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="既往主要症状">
            <el-select v-model="form.cardinal" style="width: 100%" multiple @change="seChangeCardinal">
              <el-option
                v-for="item in cardinal"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="其他" v-if="showCardinal">
          <el-input v-model="form.cardinalContent"></el-input>
          </el-form-item>
        </el-col>
      </el-row>



      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="既往关锁情况">
            <el-select v-model="form.pivotal" style="width: 100%">
              <el-option
                v-for="item in pivotal"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="既往门诊治疗情况">
            <el-select v-model="form.outpatient" style="width: 100%">
              <el-option
                v-for="item in outpatient"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="首次抗精神病药治疗时间" label-width="180px">
            <el-date-picker
              v-model="form.firstDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">


            <el-form-item label="既往住院治疗情况">
              <el-row>
                <el-col :lg="10" :xl="10" >曾住精神专科医院/综合医院精神专科</el-col>
                <el-col :lg="6" :xl="6">
                  <el-input v-model="form.frequency"></el-input>
                </el-col>

                <el-col :lg="3" :xl="3" >次</el-col>

              </el-row>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" >
          <el-form-item label="目前诊断情况" >
            <el-input v-model="form.diagnosis"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12" >
          <el-form-item label="确诊医院" >
            <el-input v-model="form.diagnosis"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="确诊日期">
            <el-date-picker
              v-model="form.hospitalDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="最后一次治疗效果">
            <el-select
              v-model="form.exposure"
              style="width: 100%"

            >
              <el-option
                v-for="item in exposure"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12" >
          <el-form-item label="危险行为">
            <el-select
              v-model="form.dangerous"
              style="width: 100%"
              multiple @change="seChangeDangerous"
            >
              <el-option
                v-for="item in dangerous"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.isDisabled"
              ></el-option>
            </el-select>
          </el-form-item>


          <el-form-item label="轻度滋事" v-if="showOne">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showOne"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>


          <el-form-item label="肇事" v-if="showTwo">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showTwo"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>


          <el-form-item label="肇祸" v-if="showThree">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showThree"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>


          <el-form-item label="其他危害行为" v-if="showFour">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showFour"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>

          <el-form-item label="自伤" v-if="showFive">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showFive"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>

          <el-form-item label="自杀未遂" v-if="showSix">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.showSix"></el-input>
              </el-col>

              <el-col :lg="3" :xl="3" >次</el-col>

            </el-row>
          </el-form-item>


        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="经济状况">
            <el-select
              v-model="form.financial"
              style="width: 100%"
            >
              <el-option
                v-for="item in financial"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>


        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
  <el-form-item label="专科医生意见">
    <el-input v-model="form.doctorAdvice"></el-input>
  </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="填表日期">
            <el-date-picker
              v-model="form.fillingData"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>

        </el-col>
      </el-row>



      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生">
            <el-input v-model="form.FollowDoctor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生签名">
              <el-upload
                class="upload-demo"
                action=""
                list-type="picture-card"
                :before-remove="beforeRemove1"
                :on-change="onprogress1"
                accept=".jpg,.png,"
                :multiple="false"
                :limit="1"
                :on-exceed="onExceed1"
                :file-list="fileList1"
                :auto-upload="false"
              >
                <em class="el-icon-plus"></em>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="患者家属">
            <el-input v-model="form.relatives"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="患者家属签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>



      <el-row :gutter="20">

        <el-col :lg="12" :xl="12">
          <el-form-item label="现场图片">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" class="submitSty">
        <HButton type="add" @click="submit">提交</HButton>
      </el-row>
    </el-form>
    <diseaseAdd ref="diseaseAdd" @transData="diseaseAdd"></diseaseAdd>
    <operationAdd ref="operationAdd" @transData="operationAdd"></operationAdd>
    <traumaAdd ref="traumaAdd" @transData="traumaAdd"></traumaAdd>
    <bloodAdd ref="bloodAdd" @transData="bloodAdd"></bloodAdd>
  </div>
</template>

<script>
import axios from "axios";
import diseaseAdd from "./components/disease-add";
import operationAdd from "./components/operation-add";
import traumaAdd from "./components/trauma-add";
import bloodAdd from "./components/blood-add";
import { inputValidator, IDValid } from "@/utils/validate";
import {
  addFileUrl,monthAge,previous,informed,cardinal,pivotal,exposure,dangerous,financial
} from "@/api/followForms/severeMental";
const baseApi = process.env.VUE_APP_BASE_API;
export default {
  components: { diseaseAdd, operationAdd, traumaAdd, bloodAdd },
  data() {
    return {
      showOne:false,
      showTwo:false,
      showThree:false,
      showFour:false,
      showFive:false,
      showSix:false,
      financial:financial,
      dangerous:dangerous,
      showCardinal:false,
      exposure:exposure,
      pivotal:pivotal,
      cardinal:cardinal,
      informed:informed,
      monthAge:monthAge,
      previous:previous,
      fileList: [],
      fileList1: [],
      addFileUrl: baseApi + addFileUrl,
      ifEdit:false,
      form: {
        sex: "1",
        birthday: "",
      },
      disease: [],
      operation: [],
      trauma: [],
      blood: [],
      medicalList: [],
      payTypeArr: [],
      drugAllergyArr: [],
      exposureArr: [],
      fatherPrevalenceArr: [],
      motherPrevalenceArr: [],
      brotherPrevalenceArr: [],
      childrenPrevalenceArr: [],

      formRules: {
        userName: inputValidator,
        idCard: IDValid,
        filingDate: inputValidator,
      },
    };
  },
  created() {},
  methods: {
    seChangeDangerous(value){
      this.form.dangerous=value

      this.form.dangerous.forEach(item =>{

       switch (item) {
         case 1:
           this.showOne=true
           break;
         case 2:
           this.showTwo=true
           break;
         case 3:
           this.showThree=true
           break;
         case 4:
           this.showFour=true
           break;
         case 5:
           this.showFive=true
           break;
         case 6:
           this.showSix=true
           break;

       }

      })
    },
    seChangeCardinal(value){
      this.form.cardinal=value
      this.form.cardinal.forEach(item =>{
        if(item == 12){
          this.showCardinal=true
        }

      })
    },
    addDisease() {
      this.$refs.diseaseAdd.openDialog();
    },
    addOperation() {
      this.$refs.operationAdd.openDialog();
    },
    addTrauma() {
      this.$refs.traumaAdd.openDialog();
    },
    addBlood() {
      this.$refs.bloodAdd.openDialog();
    },
    delDisease(index) {
      this.form.disease.splice(index, 1);
    },
    delOperation(index) {
      this.form.operation.splice(index, 1);
    },
    delTrauma(index) {
      this.form.trauma.splice(index, 1);
    },
    delBlood(index) {
      this.form.blood.splice(index, 1);
    },
    diseaseAdd(form) {
      this.disease.push(JSON.parse(JSON.stringify(form)));
    },
    operationAdd(form) {
      this.operation.push(JSON.parse(JSON.stringify(form)));
    },
    traumaAdd(form) {
      this.trauma.push(JSON.parse(JSON.stringify(form)));
    },
    bloodAdd(form) {
      this.blood.push(JSON.parse(JSON.stringify(form)));
    },
    submit() {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请输入必填项!");
        this.form.birthday = this.dateChange(this.form.birthday);
        this.form.filingDate = this.dateChange(this.form.filingDate);
        if (this.disease.length > 0) {
          this.disease.forEach((e) => {
            e.diseaseTime = this.dateChange(e.diseaseTime);
          });
          this.form.disease = JSON.stringify(this.disease);
        }
        if (this.operation.length > 0) {
          this.operation.forEach((e) => {
            e.operationTime = this.dateChange(e.operationTime);
          });
          this.form.operation = JSON.stringify(this.operation);
        }
        if (this.trauma.length > 0) {
          this.trauma.forEach((e) => {
            e.traumaTime = this.dateChange(e.traumaTime);
          });
          this.form.trauma = JSON.stringify(this.trauma);
        }
        if (this.blood.length > 0) {
          this.blood.forEach((e) => {
            e.bloodTime = this.dateChange(e.bloodTime);
          });
          this.form.blood = JSON.stringify(this.blood);
        }
        await this.uploadImage();
        addResident(this.form).then((res) => {
          if (res.code == "AA000000") {
            this.$message.success(res.msg);
          } else {
            this.form.birthday = "";
            this.form.filingDate = "";
          }
        });
      });
    },
    //支付方式选择
    seChange(value) {
      this.form.payType = this.payTypeArr.toString();
    },
    //多选封装
    select(value, options) {
      if (!(value.indexOf("1") == -1)) {
        options.forEach((e) => {
          if (e.id != "1") {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      } else if (value.length == 0) {
        options.forEach((e) => {
          e.isDisabled = false;
        });
      } else {
        options.forEach((e) => {
          if (e.id == "1") {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      }
    },
    //药物过敏史选择
    seChange1(value) {
      this.form.drugAllergy = this.drugAllergyArr.toString();
      this.select(value, this.drugAllergy);
    },
    //暴露史选择
    seChange2(value) {
      this.form.exposure = this.exposureArr.toString();
      this.select(value, this.exposure);
    },
    //父亲-选择
    seChange3(value) {
      this.form.fatherPrevalence = this.fatherPrevalenceArr.toString();
      this.select(value, this.fatherPrevalence);
    },
    //母亲-选择
    seChange4(value) {
      this.form.motherPrevalence = this.motherPrevalenceArr.toString();
      this.select(value, this.motherPrevalence);
    },
    //兄弟-选择
    seChange5(value) {
      this.form.brotherPrevalence = this.brotherPrevalenceArr.toString();
      this.select(value, this.brotherPrevalence);
    },
    //子女-选择
    seChange6(value) {
      this.form.childrenPrevalence = this.childrenPrevalenceArr.toString();
      this.select(value, this.childrenPrevalence);
    },
    //转时间戳
    dateChange(date) {
      return new Date(date).getTime();
    },
    //上传图片
    async uploadImage() {
      let formData = new FormData();
      if (this.fileList.length > 0) {
        this.fileList.map((item) => {
          formData.append("images", item.raw);
        });
        formData.append("token", this.$store.state.token);
        await axios({
          method: "POST",
          url: this.addFileUrl,
          header: {
            "Content-Type": "multipart/form-data",
          },
          withCredentials: false,
          data: formData,
        }).then((res) => {
          if (res.data.code == "AA000000") {
            this.form.pictures = res.data.data;
          }
        });
      }

      let formData1 = new FormData();
      if (this.fileList1.length > 0) {
        this.fileList1.map((item) => {
          formData1.append("images", item.raw);
        });
        formData1.append("token", this.$store.state.token);
        await axios({
          method: "POST",
          url: this.addFileUrl,
          header: {
            "Content-Type": "multipart/form-data",
          },
          withCredentials: false,
          data: formData1,
        }).then((res1) => {
          if (res1.data.code == "AA000000") {
            this.form.residentName = res1.data.data;
          }
        });
      }
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress(file, fileList) {
      this.fileList = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress1(file, fileList) {
      this.fileList1 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList1.pop();
      }
    },
    onExceed1() {
      this.$message.error("最多上传1个！");
    },
    formData(data) {
      this.form = data;
      for (var key in this.form) {
        if (typeof this.form[key] == "number") {
          if ([key] != "birthday" && [key] != "filingDate")
            this.form[key] = this.form[key].toString();
        }
      }
      if (data.disease != "") {
        this.disease = JSON.parse(data.disease);
        this.medicalList.push("疾病");
      }
      if (data.operation != "") {
        this.operation = JSON.parse(data.operation);
        this.medicalList.push("手术");
      }
      if (data.trauma != "") {
        this.trauma = JSON.parse(data.trauma);
        this.medicalList.push("外伤");
      }
      if (data.blood != "") {
        this.blood = JSON.parse(data.blood);
        this.medicalList.push("输血");
      }
      if (this.form.picpictures != "") {
        let obj = new Object();
        obj.url = baseApi + "/file/" + this.form.pictures;
        this.fileList.push(obj);
      }
      if (this.form.residentName != "") {
        let obj1 = new Object();
        obj1.url = baseApi + "/file/" + this.form.residentName;
        this.fileList1.push(obj1);
      }
      this.payTypeArr = this.form.payType.split(",");
      this.drugAllergyArr = this.form.drugAllergy.split(",");
      this.exposureArr = this.form.exposure.split(",");
      this.fatherPrevalenceArr = this.form.fatherPrevalence.split(",");
      this.motherPrevalenceArr = this.form.motherPrevalence.split(",");
      this.brotherPrevalenceArr = this.form.brotherPrevalence.split(",");
      this.childrenPrevalenceArr = this.form.childrenPrevalence.split(",");
    },
    pushForm() {
      this.$refs.formRef.validateField("idCard", (valid) => {
        if (valid) return this.$message.error("请输入正确身份证号!");
        getByCard(this.form.idCard).then((res) => {
          this.formData(res.data);
        });
      });
    },
    //供父组件调用函数
    editForm(row,ifEdit) {
      this.ifEdit = ifEdit
      this.formData(row)
    },
  },
};
</script>

<style lang="less" scoped>
.spanSty {
  font-size: 30px;
  width: 900px;
  margin-bottom: 20px;
  margin-left: 30%;
}
.submitSty {
  float: right;
  margin-right: 45%;
}
</style>
